<template>
  <u-table-column v-if="$attrs.ctype == 'selection'" v-bind="$attrs" :width="colWidth" class-name="table-td"/>
  <u-table-column v-else-if="$attrs.ctype == 'index'" v-bind="$attrs" show-overflow-tooltip align="center"
                  :width="colWidth" class-name="table-td table-th-td-index"/>

  <u-table-column v-else-if="$attrs.ctype == 'datetime'" v-bind="$attrs" :sortable="sortable" show-overflow-tooltip
                  :width="colWidth" class-name="table-td">
    <template slot-scope="scope">{{field(scope.column.property, scope.row[scope.column.property]) == '-' ? '-' :
      parseTime(field(scope.column.property, scope.row[scope.column.property]))}}
    </template>
  </u-table-column>

  <u-table-column v-else-if="$attrs.hasOwnProperty('searchable') && $attrs.ctype == 'city'" v-bind="$attrs"
                  show-overflow-tooltip :width="colWidth" class-name="table-td">
    <template slot="header" slot-scope="{column}">
      <ad-table-header-filter v-bind="column" :queryName="queryName(column)" @search="$emit('search')"/>
    </template>
    <template slot-scope="scope">{{field(scope.column.property, scope.row[scope.column.property]) == '-' ? '-' :
      parseCityCode(scope.row[scope.column.property])}}
    </template>

    <!--    <template slot-scope="scope">{{field(scope.column.property, scope.row[scope.column.property]) == '-' ? '-' : parseCityCode(scope.row[scope.column.property])}}</template>-->
  </u-table-column>
  <u-table-column v-else-if=" $attrs.ctype == 'city'" v-bind="$attrs" show-overflow-tooltip :width="colWidth"
                  class-name="table-td">
    <template slot-scope="scope">{{field(scope.column.property, scope.row[scope.column.property]) == '-' ? '-' :
      parseCityCode(scope.row[scope.column.property])}}
    </template>
  </u-table-column>

  <u-table-column v-else-if=" $attrs.ctype == 'line'" v-bind="$attrs" show-overflow-tooltip :width="colWidth"
                  class-name="table-td">
    <template slot-scope="scope">{{field(scope.column.property, scope.row[scope.column.property]) == '-' ? '-' :
      scope.row[scope.column.property].split(',').map(code => parseCityCode(code)).join(' - ')}}
    </template>
  </u-table-column>

  <u-table-column
      v-else-if="$attrs.hasOwnProperty('searchable')&& !$attrs.hasOwnProperty('href') && $attrs.ctype == 'orderNo'"
      v-bind="$attrs"
      show-overflow-tooltip :width="colWidth" class-name="table-td">
    <template slot="header" slot-scope="{column}">
      <ad-table-header-filter v-bind="column" :queryName="queryName(column)" @search="$emit('search')"/>
    </template>
    <template slot-scope="{row}">
      <slot :row="row" v-if="row.hasUrgent == 1">
        <span v-html="row.orderSubNo "></span><span class="icon-urgent">急</span>
      </slot>
      <slot :row="row" v-else><span v-html="row.orderSubNo"></span></slot>
    </template>
  </u-table-column>

  <u-table-column
      v-else-if="$attrs.hasOwnProperty('searchable')&& $attrs.hasOwnProperty('href') && $attrs.ctype == 'urgent'"
      v-bind="$attrs"
      show-overflow-tooltip :width="colWidth" class-name="table-td">
    <template slot="header" slot-scope="{column}">
      <ad-table-header-filter v-bind="column" :queryName="queryName(column)" @search="$emit('search')"/>
    </template>
    <template slot-scope="{row}">
      <span class="el-link--inner" @click.stop="openInNewWindow($attrs.href, row)">
      <slot :row="row" v-if="row.hasOnlinePay == 1">
        <span v-html="row.orderSubNo "></span><span class="icon-urgent" style="background: green; color: white">线</span>
      </slot>
      <slot :row="row" v-else-if="row.hasTransferVoucher == 1">
        <span v-html="row.orderSubNo "></span><span class="icon-urgent">凭</span>
      </slot>
      <slot :row="row" v-else><span v-html="row.orderSubNo"></span></slot>
      </span>
    </template>
  </u-table-column>

  <u-table-column v-else-if="$attrs.hasOwnProperty('searchable') && $scopedSlots.default" v-bind="$attrs"
                  :sortable="sortable" show-overflow-tooltip :width="colWidth" class-name="table-td">
    <template slot="header" slot-scope="{column}">
      <ad-table-header-filter v-bind="column" :queryName="queryName(column)" @search="$emit('search')"/>
    </template>
    <template slot-scope="{row}">
      <slot :row="row"></slot>
    </template>
  </u-table-column>

  <u-table-column
      v-else-if="$attrs.hasOwnProperty('searchable') && $attrs.hasOwnProperty('href') && $attrs.ctype == 'orderNo'"
      v-bind="$attrs"
      :sortable="sortable" show-overflow-tooltip :width="colWidth" class-name="table-td">
    <template slot="header" slot-scope="{column}">
      <ad-table-header-filter v-bind="column" :queryName="queryName(column)" @search="$emit('search')"/>
    </template>
    <template slot-scope="scope">
      <span class="el-link--inner" @click.stop="openInNewWindow($attrs.href, scope.row)">
        <span v-if="scope.row.hasUrgent == 1">
          <span v-html="scope.row[scope.column.property]"></span><span class="icon-urgent">急</span>
        </span>
        <span v-else v-html="scope.row[scope.column.property]"></span>
      </span>
    </template>
  </u-table-column>

  <u-table-column v-else-if="$attrs.hasOwnProperty('searchable')" v-bind="$attrs" :sortable="sortable"
                  show-overflow-tooltip :width="colWidth" class-name="table-td">
    <template slot="header" slot-scope="{column}">
      <ad-table-header-filter v-bind="column" :queryName="queryName(column)" @search="$emit('search')"/>
    </template>
    <template slot-scope="scope"><span v-html="field(scope.column.property, scope.row[scope.column.property])"></span>
    </template>
  </u-table-column>

  <u-table-column v-else-if="$attrs.hasOwnProperty('dictName') && $scopedSlots.default" v-bind="$attrs"
                  :sortable="sortable" :filters="filters" :column-key="$attrs.prop" :show-overflow-tooltip="false"
                  :width="colWidth" class-name="table-td">
    <template slot-scope="{row}">
      <slot :row="row"></slot>
    </template>
  </u-table-column>

  <u-table-column v-else-if="$attrs.hasOwnProperty('dictName')" v-bind="$attrs" :sortable="sortable" :filters="filters"
                  :column-key="$attrs.prop" show-overflow-tooltip :width="colWidth" class-name="table-td">
    <template slot-scope="scope">{{scope.row[scope.column.property] !== "" ? parseStatus(dict, $attrs.dictName,
      scope.row[scope.column.property]) : '-'}}
    </template>
  </u-table-column>

  <u-table-column v-else-if="$attrs.hasOwnProperty('operation')" label="操作" :width="colWidth" :fixed="operates.fixed">
    <template slot-scope="scope">
      <template v-for="(btn, key) in operates.list">
        <el-link :type="btn.type" style="margin-right:5px;"
                 :disabled="btn.disabled&&btn.disabled(scope.$index,scope.row)"
                 @click.stop="btn.method(key,scope.row)">
          {{ btn.label }}
        </el-link>
      </template>
    </template>
  </u-table-column>

  <u-table-column v-else-if="$scopedSlots.default" v-bind="$attrs" :sortable="sortable" show-overflow-tooltip
                  :width="colWidth" class-name="table-td">
    <template slot-scope="{row}">
      <slot :row="row"></slot>
    </template>
  </u-table-column>

  <u-table-column v-else v-bind="$attrs" :sortable="sortable" show-overflow-tooltip :width="colWidth"
                  class-name="table-td">
    <template slot-scope="scope">{{field(scope.column.property, scope.row[scope.column.property])}}</template>
  </u-table-column>
</template>

<script>
  import AdTableHeaderFilter from '../AdTableHeaderSearch'
  import config from './mixins/config'
  import mixins from './mixins/index'

  export default {
    components: {AdTableHeaderFilter},
    mixins: [config, mixins],
    props: {
      operates: {
        list: []
      },
    },
    methods: {
      openInNewWindow(href, row) {
        let id = row.id
        if (this.$attrs.hasOwnProperty('id')) {
          id = row[this.$attrs.id]
        }
        window.open(`${href}?id=${id}`, '_blank')
      }
    }
  }
</script>

<style lang="scss" scoped>
  .el-link {
    line-height: 1;
    font-size: inherit;
    font-weight: inherit;

    &::after {
      bottom: -1px !important;
    }

    // 下划线
    //&::after { display: none; }
  }
</style>